<template>
	<view class="content">
		<view class="content-top">

			<!-- 我的银行卡信息 -->
			<view class='cell-group margin-cell-group' v-if="userbankCard" @click="toBankCardList">
				<view class='cell-item right-img cell-item-mid' style="padding: 0 30rpx;">
					<view class='cell-item-hd'>
						<image class="yl-logo" :src="cardInfo.bank_logo" mode=""></image>
					</view>
					<view class='cell-item-bd'>
						<text class="cell-bd-view">{{ cardInfo.card_number || ''}}</text>
					</view>
					<view class="cell-item-ft">
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</view>
			<view class='cell-group margin-cell-group' v-else @click="toBankCardList">
				<view class='cell-item right-img cell-item-mid'>
					<view class='cell-item-hd'>
						<image class="yl-logo" src="/static/image/yl.png" mode=""></image>
					</view>
					<view class='cell-item-bd'>
						<text class="cell-bd-view">请添加银行卡</text>
					</view>
					<view class="cell-item-ft">
						<image class='cell-ft-next icon' src='/static/image/right.png'></image>
					</view>
				</view>
			</view>

			<!-- 提现金额手续费 提现金额input -->
			<view class='cell-group margin-cell-group'>
				<view class='cell-item'>
					<view class='cell-item-bd withdrawcash-input'>
						<text style="font-size: 40rpx;font-weight: bold;color: #F2D7AAFF;">￥</text><input type="number"
							@input="inputNumber" :maxlength="maxlength" focus v-model="money"
							style="color: #F2D7AAFF;font-size: 44rpx;font-weight: bold;" />
					</view>
				</view>
				<view class='cell-item'>
					<view class='cell-item-bd'>
						<view class='cell-hd-title' style="color: #666;" v-show="!isError">
							当前可提现金额{{ maxmoney() || ''}}元,<text style="color:#F2D7AAFF" @click="moneyChange">
								全部提现</text></view>
						<view class='cell-hd-title' style="color: #f00;" v-show="isError">提现金额超过可用余额</view>
					</view>
				</view>

			</view>
			<view class='cell-item' style="margin: 0 30rpx;">
				<view class='cell-item-bd' v-if="tocashExplain">
					<view class='cell-hd-title' style="color: #666;"><text
							style="color: #F2D7AAFF;">*</text>{{ tocashExplain || ''}}</view>
				</view>
			</view>
		</view>
		<view style="box-shadow: none;position: fixed;bottom: 94rpx;left: 61rpx;">
			<button class="btn-b" hover-class="btn-hover2" v-if="isSubmit" @click="toCash" :disabled='submitStatus'
				:loading='submitStatus'>确认提现</button>
			<button class="btn-bb" hover-class="btn-hover2" v-else-if="!isSubmit" disabled>确认提现</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardInfo: {}, // 我的银行卡信息
				user: {}, // 用户信息
				isError: false, // 当提现金额大于可用余额 显示错误提示
				isSubmit: false, // 提现点击
				money: '', // 用户输入的提现金额
				submitStatus: false,
				maxlength: 10 //默认一个长度 
			}
		},
		onLoad() {
			this.userBankCard()
			this.userInfo()
			// 监听custom-card-selected事件，获取选中的卡片信息
			uni.$on('custom-card-selected', (selectedCard) => {
				this.cardInfo = selectedCard;
			});
		},
		computed: {
			userbankCard() {
				if (Object.keys(this.cardInfo).length) {
					return true
				} else {
					return false
				}
			},
			// 店铺提现手续费
			tocashMoneyRate() {
				return this.$store.state.config.tocash_money_rate
			},
			// 店铺提现最低金额
			tocashMoneyLow() {
				return this.$store.state.config.tocash_money_low
			},
			// 每笔手续费
			tojtocash() {
				return this.$store.state.config.jtocash_money_danbi
			},
			// 提现文字说明
			tocashExplain() {
				if (this.tocashMoneyRate && this.tocashMoneyLow) {
					return `最低提现金额${this.tocashMoneyLow}元（收取${this.tocashMoneyRate}%服务费+每笔${this.tojtocash}元服务费）`
				} else if (this.tocashMoneyLow) {
					return '最低提现金额 ' + this.tocashMoneyLow + ' 元'
				} else if (this.tocashMoneyRate) {
					return '收取 ' + this.tocashMoneyRate + ' %服务费'
				} else {
					return ''
				}
			}
		},
		methods: {
			moneyChange() {
				this.money = ((this.user.balance - (this.user.balance * (this.tocashMoneyRate / 100))).toFixed(2)) - 2
			},
			maxmoney() {
				let money = ((this.user.balance - (this.user.balance * (this.tocashMoneyRate / 100))).toFixed(2)) - 2
				return money
			},
			inputNumber: function(e) {
				let value = e.detail.value;
				let dot = value.indexOf('.'); //包含小数点
				let reg = /^[0-9]+$/; //正整数
				if (dot > -1) {
					this.maxlength = dot + 3; //长度是小数点后两位
					if (value.length > dot + 3) {}
				}
				if (reg.test(value)) { //如果是正整数不包含小数点
					this.maxlength = 10;
				}
			},
			// 获取我的默认银行卡信息
			userBankCard() {
				this.$api.getDefaultBankCard({}, res => {
					if (res.status) {
						this.cardInfo = res.data
					}
				})
			},
			// 获取用户信息
			userInfo() {
				// 获取我的余额信息
				// 获取用户的可用余额
				this.$api.userInfo({}, res => {
					this.user = res.data
				})
			},
			// 去提现
			toCash() {
				if (!Object.keys(this.cardInfo).length) {
					this.$common.errorToShow('请选择要提现的银行卡')
					return false
				} else if (!this.money) {
					this.$common.errorToShow('请输入要提现的金额')
					return false
				} else if (Number(this.money) === 0) {
					this.$common.errorToShow('提现金额不能为0')
				} else {
					this.submitStatus = true;
					this.$api.userToCash({
						money: this.money,
						cardId: this.cardInfo.id
					}, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								// this.submitStatus = false;
								uni.navigateBack({
									delta: 1
								});
							})
						} else {
							this.$common.errorToShow(res.msg);
							// this.submitStatus = false;
						}
					}, res => {
						this.submitStatus = false;
					})
				}
			},
			// 跳转我的银行卡列表
			toBankCardList() {
				this.$common.navigateTo('./bankcard?mold=select')
			}
		},
		watch: {
			money() {
				// 比较用户的输入金额 如果大于可用金额
				if (this.money === '' || Number(this.money) <= 0) {
					this.isSubmit = false
				} else if (Number(this.money) > Number(this.user.balance)) {
					this.isError = true
					this.isSubmit = false
				} else if (Number(this.money) < Number(this.tocashMoneyLow)) {
					this.isError = false
					this.isSubmit = false
				} else {
					this.isError = false
					this.isSubmit = true
				}
			}
		}
	}
</script>

<style scoped lang='scss'>
	.btn-b {
		background: linear-gradient(180deg, #F2D7AA 0%, #DEBC86 100%);
		width: 629rpx !important;
		height: 75rpx !important;
		border: none !important;
		font-weight: bold !important;
		color: #181818FF !important;
		line-height: 75rpx !important;
	}

	.btn-bb {
		width: 629rpx !important;
		height: 75rpx !important;
		/* border: 1rpx solid #d4d4d4 !important; */
		font-weight: bold !important;
		line-height: 75rpx !important;
	}

	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item {
		border: none;
		background-color: transparent;
	}

	.cell-group {
		background-color: #202226;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
	}

	.cell-item-bd {
		color: #fff;
		font-size: 26upx;
	}

	.button-bottom .btn {
		width: 100%;
	}

	.yl-logo {
		width: 188upx;
		height: 54upx;
		float: left;
		border-radius: 10rpx;
	}

	.withdrawcash-input {
		display: flex;
		align-items: center;
		font-size: 50upx;
		border-bottom: 2upx solid #e8e8e8;
		padding-bottom: 20upx;
		width: 95%;
		max-width: 95%;
	}

	.withdrawcash-input text {
		font-size: 40upx;
	}

	.withdrawcash-input input {
		display: inline-block;
		min-width: 500upx;
		padding-left: 20upx;
	}

	/* #ifdef MP-ALIPAY */
	.cell-hd-title input {
		font-size: 24px;
		height: 18px;
	}

	/* #endif */
</style>